<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">新闻管理</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="maincontent">
      <div class="content_title">新闻管理</div>
      <div class="searchbox">
        <el-form :label-width="labelWidth" :model="searchObj" class="demo-form-inline" size="small">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="新闻标题">
                <el-input clearable v-model="searchObj.title" placeholder="新闻标题"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="新闻类别">
                <el-select v-model="searchObj.password" placeholder="请选择新闻类别">
                  <el-option
                    v-for="(item,index) in newCategoryList"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="searchbox_center">
            <el-button size="small" @click="onRest">重置</el-button>
            <el-button size="small" type="primary" @click="onSearch">查询</el-button>
          </div>
        </el-form>
      </div>
      
      <div class="tablebox">
        <div class="tdAdd">
          <el-button size="small" type="primary" @click="addItem" >新增</el-button>
          <el-button size="small" type="warning" >删除</el-button>
        </div>
        <el-table :data="dataList" border style="width: 100%" size="small" v-loading="loading">
          <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
          <el-table-column prop="title" label="新闻标题"  show-overflow-tooltip="">
            <template slot-scope="scope">
              <span><a href="javascript:;" @click="showDetail(scope.row)">{{scope.row.title}}</a></span>
              
            </template>
          </el-table-column>
          <el-table-column prop="category"  width="90px" label="新闻类别"></el-table-column>
          <el-table-column prop="createtime" width="160px"  label="发布时间">
            <template slot-scope="scope">
              {{queryTime(scope.row.createtime)}}
            </template>
          </el-table-column>
          <el-table-column prop="author"  width="90px" label="作者"></el-table-column>
          <el-table-column prop="readnum"  width="90px" label="点击次数"></el-table-column>
          <el-table-column prop="lastupdatetime" width="160px" label="最后编辑时间">
            <template slot-scope="scope">
              {{queryTime(scope.row.lastupdatetime)}}
            </template>
          </el-table-column>
          <el-table-column prop="password" label="操作" width="120px" align="center">
            <template slot-scope="scope">
              <span class="tdsp">
                <a href="javascript:;" @click="delItem(scope.row)">删除</a>
              </span>
              <span>
                <a href="javascript:;" @click="editItem(scope.row)">编辑</a>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div class="paginationbox">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.pageNum"
            :total="pagination.total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <editDialog :editDialog="editDialog" v-if="editDialog.show" @editSuccess="getEditSuccess"></editDialog>
    <detailDialog :detailDialog="detailDialog" v-if="detailDialog.show" ></detailDialog>
  </div>
</template>
<script>
import api from "@/api";
import utils from '@/utils'
import editDialog from "./editDialog";
import detailDialog from './detailDialog'
export default {
  components: {
    editDialog,
    detailDialog
  },
  data() {
    return {
      searchObj: {},
      searchObjTemp: {},
      labelWidth: "140px",
      userList: [],
      dataList: [],
      loading: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      editDialog: {
        show: false,
        data: {}
      },
      detailDialog:{
        show:false,
        data:{}
      },
      newCategoryList:[]
    };
  },
  created() {
    this.getDataList()
  },
  methods: {
    //获取数据列表
    getDataList() {
      var obj = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      };
      var sendObj = Object.assign(obj, this.searchObjTemp);
      this.loading = true;
      api
        .getNewsList(sendObj)
        .then(res => {
          this.loading = false;
          if (res.code === 200) {
            console.log("返回数据", res.data);
            this.dataList = res.data;
            this.pagination.total = res.total;
            this.pagination.pageNum = res.pageNum;
            this.pagination.pageSize = res.pageSize;
          } else {
            this.$alert(res.msg, "提示", {
              confirmButtonText: "确定",
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.loading = false;
          this.$alert(err, "系统错误", {
            confirmButtonText: "确定",
            type: "error"
          });
        });
      
    },

    onSearch() {
      this.pagination.pageNum = 1;
      console.log("查询");
      this.searchObjTemp = JSON.parse(JSON.stringify(this.searchObj));
      this.getDataList();
    },

    //重置
    onRest() {
      this.searchObj = {};
      this.searchObjTemp = {};
      this.getDataList();
    },

    handleSizeChange(val) {
      console.log(val);
      this.pagination.pageNum = 1;
      this.pagination.pageSize = val;
      this.getDataList();
    },

    handleCurrentChange(val) {
      console.log(val);
      this.pagination.pageNum = val;
      this.getDataList();
    },

    //删除
    delItem(item) {
      console.log(item);
      this.$confirm("确定删除该用户吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.confirmDel(item);
        })
        .catch(() => {
          console.log("取消");
        });
    },

    confirmDel(item) {
      console.log("确定删除", item);
      var obj = {
        id: item.id
      };
      api
        .delUser(obj)
        .then(res => {
          if (res.code === 200) {
            this.$message.success("删除成功！");
            this.getDataList();
          } else {
            this.$alert(res.msg, "提示", {
              confirmButtonText: "确定",
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.loading = false;
          this.$alert(err, "系统错误", {
            confirmButtonText: "确定",
            type: "error"
          });
        });
    },

    //编辑
    editItem(item) {
      console.log(item);
      this.editDialog.show = true;
      this.editDialog.data = JSON.parse(JSON.stringify(item));
      this.editDialog.type="edit"
    },

    //新增
    addItem(){
      this.editDialog.show=true
      this.editDialog.data={}
      this.editDialog.type="add"

    },

    //查看详情
    showDetail(item){
      this.detailDialog.show=true
      this.detailDialog.data=JSON.parse(JSON.stringify(item))
    },

    //编辑成功刷新数据
    getEditSuccess() {
      this.getDataList();
    },

    //处理时间
    queryTime(time){
      return utils.queryDate(time)

    },


  }
};
</script>
